import { List } from "./list"
import { SearchPanel } from "./search-panel"
import React, { useEffect, useState } from "react"
import { cleanObject, useMount, useDebounce } from '../../utils'
import * as qs from 'qs'

const apiUrl = process.env.REACT_APP_API_URL

export const ProjectListSCrieen = () => {
  const [param, setParam] = useState({
    name: '',
    personId: ''
  })
  const [users, setUsers] = useState([])
  const [list, setList] = useState([])
  const debounceParam = useDebounce(param, 1000)
  useEffect(() => {
    // console.log(cleanObject(param))
    fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debounceParam))}`).then(async response => {
      if (response.ok) {
        await response.json().then(res => setList(res))
        // console.log(response.json().then(res => console.log(res)))
      }
    })
  }, [debounceParam])// debounceParam发生变化时页面就发生更新
  useMount(() => {
    fetch(`${apiUrl}/users`).then(async response => {
      if (response.ok) {
        await response.json().then(res => setUsers(res))
      }
    })
  })
  return (
    <div>
      <SearchPanel users={users} param={param} setParam={setParam} />
      <List users={users} list={list} />
    </div>
  )
}